<template>
	<view class="content" v-if="show">
		<view class='flex flex-pack-justify' style="padding: 30rpx;">
			<uv-icon @click="onBack" size="40rpx" name='arrow-leftward' color="black"></uv-icon>
			<navigator open-type="switchTab" url="/pages/index/order">我的订单</navigator>
		</view>
		<view class='card'>
			<uv-input v-if="type == 0" v-model="mobile" maxlength="11" type="tel" style="border-bottom: 1px solid gainsboro;padding: 20rpx 0;" fontSize="44rpx" placeholder="请输入手机号码" border="none" suffixIcon='edit-pen' :suffixIconStyle="{fontSize: '50rpx',color:'gray'}"></uv-input>
			<block v-else-if="type == 1">
			<view class='tiptitle'><text></text>请输入电费信息</view>	
			<view class='card' style="border: 1px solid gainsboro;margin: 0;padding: 0;">
				<view class='feeinfo flex' @click="onCity">
					城市<view :class='{gray:dfee.province == ""}'>{{dfee.province != "" ? (dfee.province+"-"+dfee.city) : '请选择城市'}}<uv-icon type='arrow-right'></uv-icon></view>
				</view>
				<view class='feeinfo flex'>
					机构
					<uv-radio-group @change="getData()" style="flex: none;" placement="row" v-model="dfee.type" activeColor='#2A89F8'>
						<uv-radio :customStyle='{marginRight: "30rpx"}' label="国网" name="国网"></uv-radio>
						<uv-radio label="南网" name="南网"></uv-radio>
					</uv-radio-group>
				</view>
				<view class='feeinfo flex'>
					户号<uv-input type="tel" v-model="mobile" inputAlign="right" fontSize="38rpx" border="none" placeholder="请输入户号"></uv-input>
				</view>
				<view class='feeinfo flex' v-if="dfee.type == '南网'">
					身份证后6位<uv-input type="tel" v-model="dfee.cardno" inputAlign="right" maxlength="6" fontSize="38rpx" border="none" placeholder="输入户主身份证后6位"></uv-input>
				</view>
			</view>
			</block>
			<view style="margin: 50rpx 0;" class='tiptitle'><text></text>请选择充值金额</view>
			<view class='feeitems'>
				<view class='feeitem' :class="{active:tab == k}" v-for="(g,k) in goods" @click="tab = k">
					<view class='feeprice'>{{g.price}}元</view>
					立省{{g.reduce}}元
					<view class='feetag'>限时{{g.discount}}折</view>
				</view>
			</view>
			<view style="text-align: center;color: red;font-size: 30rpx;margin: 50rpx 0;">*下单前请先阅读下单须知，平台不会主动联系客户，如有异常请联系官方客服确认，如有陌生来电，请勿相信！！！</view>
			<view v-if="goods[tab]" class='buybtn' @click="onPay">立即充值 ￥{{goods[tab].pay}} <text>(原￥{{goods[tab].price}})</text></view>
		</view>
		<view class='card' style="background: #ffeedf;">
			<view style="font-size: 40rpx;font-weight: bold;color: orangered;text-align: center;">下单须知</view>
			<view style="white-space: pre-line;">{{rule}}</view>
		</view>
		<view style="height: 100rpx;"></view>
		<uv-picker ref="proPicker" :columns="[provinces,citys[0]]" @confirm="proPickerConfirm" @change="proPickerChange"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				type:0,
				goods:[],
				rule:'',
				tab:0,
				mobile:'',
				dfee:{province:'',city:'',type:'国网'},
				provinces:[],
				citys:[]
			}
		},
		onLoad(option) {
			this.type = option.type;
			var t = this;
			this.getData()
			if(this.type == 1){
				uni.request({
					url: '/static/citys.json',
					success: function (response) {
						var data = response.data;
						for(var i in data){
							t.provinces.push(data[i].provinceName);
							var c = [];
							for(var j in data[i].citys){
								c.push(data[i].citys[j].cityName);
							}
							t.citys.push(c);
						}
					}
				});
			}
		},
		methods: {
			getData(){
				var t = this;
				this.util.post('fee',{type:this.type,dftype:this.dfee.type},(r)=>{
					t.show = true;
					t.goods = r.goods;
					t.rule = r.rule;
					getApp().globalData.setShareInfo(r.sharedata);
				})
			},
			onBack(){
				uni.navigateBack()
			},
			onCity(){
				this.$refs.proPicker.open()
			},
			proPickerChange(e){
				const { columnIndex , index} = e
				if (columnIndex === 0) {
					this.$refs.proPicker.setColumnValues(1, this.citys[index])
				}
			},
			proPickerConfirm(e){
				this.dfee.province = e.value[0];
				this.dfee.city = e.value[1];
			},
			onPay(){
				if(this.mobile == '') return uni.showToast({title:'请输入号码',icon:'none'});
				if(this.type == 0 && this.mobile.length != 11) return uni.showToast({title:'请输入正确手机号码',icon:'none'});
				if(this.type == 1){
					if(this.dfee.province == '') return uni.showToast({title:'请选择城市',icon:'none'});
					if(this.dfee.type == '南网' && (!this.dfee.cardno || this.dfee.cardno == '')) return uni.showToast({title:'请输入身份证后6位',icon:'none'});
				} 
				var t = this;
				var data = {type:this.type,mobile:this.mobile,gid:this.goods[this.tab].gid};
				if(this.type == 1) data['data'] = JSON.stringify(this.dfee);
				this.util.post('order/pay',data,(res)=>{
					if(res.code != 1) return uni.showToast({title:res.msg,icon:'none'});
					if (typeof WeixinJSBridge == 'undefined'){
					   if( document.addEventListener ){
						   document.addEventListener('WeixinJSBridgeReady', function(){onBridgeReady();}, false);
					   }else if (document.attachEvent){
						   document.attachEvent('WeixinJSBridgeReady', function(){onBridgeReady();});
						   document.attachEvent('onWeixinJSBridgeReady', function(){onBridgeReady();});
					   }
					}else{
					   onBridgeReady();
					}
					function onBridgeReady(){
						WeixinJSBridge.invoke(
						  'getBrandWCPayRequest', {
							 'appId':res.data.appid,
							 'timeStamp':res.data.timeStamp,
							 'nonceStr':res.data.nonceStr,
							 'package':res.data.package,
							 'signType':res.data.signType,
							 'paySign':res.data.paySign
						  },
						  function(res){
							  if(res.err_msg == 'get_brand_wcpay_request:ok' ){
								 uni.showToast({
									 title: '支付成功'
								 });
								 uni.switchTab({
								 	url:'/pages/index/order'
								 })
							  }else alert('支付失败');
						  }
					   );
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.content{
	background-image: linear-gradient(180deg,#2A89F8 0%,#f4f5f9 80%);
	.feeitems{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 20rpx;
		.feeitem{
			position: relative;
			border: 1px solid gainsboro;
			padding: 30rpx;
			font-size: 26rpx;
			border-radius: 16rpx;
			text-align: center;
			&.active{
				border-color: #2A89F8;
				color: #2A89F8;
				background: rgba(42, 137, 248, 0.1);
			}
			.feeprice{
				margin-bottom: 30rpx;
				font-size: 46rpx;
			}
			.feetag{
				position: absolute;
				background: #e94f55;
				color: white;
				font-size: 24rpx;
				border-radius: 8rpx;
				padding: 4rpx 8rpx;
				top: -10rpx;
				left: 0;
			}
		}
	}
	.buybtn{
		background: #2A89F8;
		border-radius: 50rpx;
		display: flex;
		align-items: baseline;
		justify-content: center;
		font-size: 36rpx;
		color: white;
		padding: 20rpx 0;
		margin: 50rpx 0;
		text{
			text-decoration: line-through;
			font-size: 28rpx;
		}
	}
	.feeinfo{
		font-size: 38rpx;
		font-weight: bold;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1px solid gainsboro;
		.gray{
			color: #c0c4cc;
		}
	}
}
</style>